<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 400px;
            /* height: 200px; */
            border: 2px solid gold;

        }

        .child{
            width: 350px;
            /* height: 80px; */
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="parent">
            <!-- {{msg}} -->
            {{form.name}}
            {{form.sex}}
            {{form.des}}
            <my-input :msg="msg" @update:msg="msg=$event"></my-input>
             <!-- sync就是一个语法糖， 等同于上面的情况 -->
            <my-input :msg.sync="msg"></my-input>
            <!-- 用语法糖的话55行的事件名称就一定要是update,如果不用语法糖的话这个update的名称就可以自己命名 -->
            <my-form v-bind.sync="form"></my-form>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>

        // sync特别适合于表单处理的情况
        Vue.component("MyInput",{
            // 为什么不报错
            // 因为obj是引用数据类型，父传的是数据的地址，vue检查的时候没有检查出来是直接修改父组件
            template: `<div class="child my-input">
                           <input type = "text" :value="msg" @input="$emit('update:msg',$event.target.value)">      
                       </div>`,
            props:["msg"]
            
        })

        Vue.component("MyForm",{
            // :value="name"每次它显示的就是父组件的值，更新就触发事件
            template: `<form class="child my-input">
                           <p>姓名：<p>
                           <input type = "text" :value="name" @input="$emit('update:name',$event.target.value)">  
                           <p>性别：<p>
                           <input type = "text" :value="sex" @input="$emit('update:sex',$event.target.value)">
                           <p>介绍：<p>
                           <input type = "text" :value="des" @input="$emit('update:des',$event.target.value)">    
                       </form>`,
            props:["name","sex","des"]
        })


        var vm = new Vue({
            el: "#app",
            data: {
               msg: "hello",
               form: {
                   name: "jack",
                   sex:"男",
                   des:"好看"
               }
            }
        })
    </script>
</body>
</html>